<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button  class="filter-item" type="primary" icon="el-icon-plus" size="mini" @click="reload">
        {{ $t('table.add') }}
      </el-button>
    </div>
    <el-table v-loading="loading"  :data="list.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" border fit highlight-current-row>
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="名称" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="创建时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="right"
      >
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"
          />
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            v-show="false"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>





    <el-drawer
      :title="digtitle"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="产品线名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" style="width: 95%"></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button class="b" @click="dialog = false">取 消</el-button>
          <el-button class="b" type="primary" @click="submitStep" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>

  </div>


</template>

<script>
    import Resource from '@/api/Resource';
    import permission from '@/directive/permission';
    const apiResource = new Resource('productLine');
    export default {
        name: "List",
        directives: { permission },
        data() {
            return {
                list: [],
                loading: true,
                dialog: false,
                digtitle:"新增产品线",
                search: "",
                users:[],
                form: {
                    id:'',
                    name: '',
                },
                formLabelWidth: '100px'
            };
        },
        created(){
          this.getList()
        },
        methods:{
            async getList(){
                this.loading = true;
                const { data } = await apiResource.list({});
                this.list=data;
                this.loading = false;

            },
            submitStep(){
                apiResource.store(this.form)
                    .then(response=>{
                      this.dialog=false;
                      this.form.name='';
                      this.loading = true;
                      this.getList();
                      this.loading = false;
                    }).catch(error => {
                    console.log(error);
                });
            },
            handleClose(done) {
                this.dialog = false;
            },
            handleEdit(index, row) {
                this.dialog = true;
                this.digtitle="编辑产品线";
                this.form.name=row.name;
                this.form.id=row.id;
            },
            reload(){
                this.digtitle="新增产品线";
                this.form.name="";
                this.form.id="";
                this.dialog=true;
            }

        }
    }
</script>

<style scoped>
.demo-drawer__footer{ padding-left: 20px; position: absolute ;bottom: 20px;}
</style>
